<template>
<el-card class="w-full pt-[5px] pb0">
  <el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="68px">
    <el-row :gutter="20">
    <el-col :span="3">
        <el-form-item label="年度" prop="appointYear">
          <el-select v-model="queryParams.appointYear" placeholder="请选择年度">
            <el-option
              v-for="dict in yearOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
    </el-col>
    <el-col :span="5">
      <el-form-item label="机构名称" prop="name">
          <el-input
          v-model="queryParams.name"
          placeholder="请输入机构名称"
          clearable
          @keyup.enter="handleQuery"
          />
      </el-form-item>
    </el-col>
    <el-col :span="3">
      <el-form-item label="机构级别" prop="levelId">
          <el-select v-model="queryParams.levelId" placeholder="请选择机构级别" clearable>
              <el-option
                  v-for="dict in cfg_category_jgjb"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
          </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="5">
      <el-form-item label="负责人" prop="charger">
          <el-input
          v-model="queryParams.charger"
          placeholder="请输入负责人"
          clearable
          @keyup.enter="handleQuery"
          />
      </el-form-item>
    </el-col>
    <el-col :span="3">
      <el-form-item label="登记状态" prop="registrationStatus">
        <el-select v-model="queryParams.registrationStatus" placeholder="请选择组成形式" clearable>
          <el-option
            v-for="dict in registrationStatusDict"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="4">
        <div class="flex justify-end"> 
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </div>
    </el-col>
    <el-col :span="1"></el-col>
    </el-row>
  </el-form>
</el-card>
<el-card class="w-full mt-[20px]" style="padding-left: 20px !important;padding-right: 20px !important;">
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button
        type="warning"
        plain
        icon="Download"
        @click="handleExport"
        v-hasPermi="['research:educationStat:export']"
      >导出{{curResultYear}}年已登记数据</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button
        type="info" 
        plain 
        icon="back"
        @click="close"
      >返回</el-button>
    </el-col>
    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  </el-row>

  <el-table v-loading="loading" :data="educationStatList">
    <el-table-column label="年度" align="center" prop="appointYear">
      <template #default="scope">
        <dict-tag :options="yearOptions" :value="scope.row.appointYear"/>
      </template>
    </el-table-column>
    <el-table-column label="机构名称" align="center" prop="name" />
    <el-table-column label="机构级别" align="center" prop="levelId">
      <template #default="scope">
        <dict-tag :options="cfg_category_jgjb" :value="scope.row.levelId" :showSpan="true"/>
      </template>
    </el-table-column>
    <el-table-column label="负责人" align="center" prop="charger" />
    <el-table-column label="登记状态" align="center" prop="registrationStatus">
      <template #default="scope">
        <dict-tag :options="registrationStatusDict" :value="scope.row.registrationStatus"/>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="scope">
        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['research:educationStat:add','research:educationStat:edit']">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <pagination
    v-show="total>0"
    :total="total"
    v-model:page="queryParams.pageNum"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
  />
</el-card>
      
<div>
<el-dialog :title="title" v-model="open"
      width="80%" 
      align-center 
      :before-close="cancel" 
      :close-on-click-modal="false" 
      :show-close="false" 
      :destroy-on-close="false&&true"
      draggable
>
  <template #header="{ close }">
    <div class="dialog-header flex justify-between items-center">
      <div>{{title}}</div>
      <el-icon class="el-icon--left cursor-pointer" @click="close"
        ><CircleCloseFilled color="#fff"
      /></el-icon>
    </div>
  </template>

  <div class="dialog-content">
      <EducationStatEdit ref='educationStatEditCom' title="基本信息" :appointYear="curResultYear" :opType="1" :opUnitId="opUnitId" :educationStatId="educationStatId" :key="comKey" @educationStatAddSuccess="onEducationStatAddSuccess" @educationStatUpdateSuccess="onEducationStatUpdateSuccess"/>
  </div>

  <template #footer>
    <div class="dialog-footer">
      <div class="operate-btns">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">关闭</el-button>
      </div>
    </div>
  </template>
</el-dialog>
</div>

</template>

<script setup name="EducationStatCollect">
import EducationStatEdit from "../components/EducationStatEdit.vue";
import { getOverPastYearOptions, getCategoryData } from "@/api/research/unit";
import { listEducationStat, collectEducationStat, getEducationStat, delEducationStat, addEducationStat, updateEducationStat } from "@/api/research/educationStat";

const { proxy } = getCurrentInstance();

const educationStatEditCom = ref(null);
const opUnitId = ref(null);
const educationStatId = ref(null);
const comKey = ref(0);
const curResultYear = ref(null);

const educationStatList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const title = ref("统计信息编辑");

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    appointYear: "2025",
    //researchUnit: {
      name: null,
      levelId: null,
      charger: null,
    //},
    registrationStatus: null,
  },
});

const { queryParams } = toRefs(data);

const yearOptions = ref([]);
const cfg_category_jgjb = ref([]);
const registrationStatusDict = ref([{value:"未登记",label:"未登记",elTagType:'danger'},{value:"已登记",label:"已登记",elTagType:'primary'}]);

onMounted(() => {
  yearOptions.value = getOverPastYearOptions(10);
  queryParams.value.appointYear = new Date().getFullYear();
  getCategoryData(cfg_category_jgjb, {bizName:"机构级别"}, true);
})

function getList() {
  loading.value = true;
  collectEducationStat(queryParams.value).then(response => {
    educationStatList.value = response.rows;
    total.value = response.total;
    loading.value = false;

    curResultYear.value = queryParams.value.appointYear;
  });
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

function handleUpdate(row) {
  ++comKey.value;
  opUnitId.value = row.id;
  educationStatId.value = row.educationStatId;
  curResultYear.value = row.appointYear;
  open.value = true;
}

function handleExport() {
  proxy.download('research/educationStat/export', {
    statYear: queryParams.value.appointYear,
  }, `研究机构教育部统计清单-${queryParams.value.appointYear}_${new Date().getTime()}.xlsx`)
}

function close() {
  const obj = { path: "/research" };
  proxy.$tab.closeOpenPage(obj);
};

function onSaveSuccess(params) {
    open.value = false;
    getList();
}

function onEducationStatAddSuccess(params) {
    onSaveSuccess();
}

function onEducationStatUpdateSuccess(params) {
    onSaveSuccess();
}

function save() {
  educationStatEditCom.value.save();
}

function cancel() {
  educationStatEditCom.value.cancel();
  open.value = false;
}

getList();
</script>

<style scoped lang="scss">
@import url("@/views/research/index.scss");
:deep(.el-tabs__header) {
  padding: 0 10px;
  margin-bottom: 0;
  background: #fff;
}
</style>